<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    body,
    html {
      height: 100%;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    div {
      display: flex;
      align-items: center;
      /* 使得内容垂直居中 */
      justify-content: space-between;
      /* 使得子元素分布在两端 */
      gap: 10px;
      /* 子元素之间的间距 */
      width: fit-content;
      /* 根据内容调整宽度 */
      padding: 5px;
      /* 添加一些内边距 */
      border: 1px solid #ccc;
      /* 可选：为div添加边框以便观察 */
    }

    .lb {
      padding-top: 2px;
      padding-bottom: 2px;
      padding-left: 5px;
      padding-right: 5px;
      border: 2px solid orange;
      /* 橙色边框 */
      display: inline-block;
      /* 确保text-align生效 */
      text-align: center;
      /* 文本居中，但这里实际上不需要，因为span默认就是文本居中 */
      /* 如果需要内容块（如包含图片或块级元素）居中，可能需要添加line-height或flex布局 */
    }

    /* .bb 不需要特别的居中样式，因为flex布局已经将其放置在左侧 */
  </style>

</head>

<body>
  <div>
    <span class="bb">
      抽中的选手是：
    </span>
    <span class="lb">
      张飞
    </span>
  </div>

  <script>
    const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']
    const random = Math.floor(Math.random() * arr.length)
    const lb = document.querySelector('.lb')
    lb.innerHTML = arr[random]
  </script>
</body>

</html>